<script setup>
import { useRouter, useRoute } from 'vue-router';
import { computed } from 'vue';

const router = useRouter();
const route = useRoute();

// 获取子路由
const medicalServicesRoutes = computed(() => {
  return router.options.routes.find(r => r.path === '/medical-services')?.children || [];
});

// 如果当前路径只是 /medical-services，默认重定向到第一个子路由
if (route.path === '/medical-services' && medicalServicesRoutes.value.length > 0) {
  router.push(`/medical-services/${medicalServicesRoutes.value[0].path}`);
}
</script>

<template>
  <div class="medical-services-container">
    <div class="page-header">
      <h1 class="page-title">医疗服务</h1>
      <p class="page-subtitle">管理诊疗方案、处方和医疗服务项目</p>
    </div>
    
    <div class="card">
      <div class="nav-tabs">
        <router-link 
          v-for="subRoute in medicalServicesRoutes" 
          :key="subRoute.path"
          :to="`/medical-services/${subRoute.path}`"
          class="nav-tab"
          :class="{ active: route.path.includes(subRoute.path) }"
        >
          <el-icon v-if="subRoute.meta && subRoute.meta.icon">
            <component :is="subRoute.meta.icon"></component>
          </el-icon>
          {{ subRoute.meta?.title }}
        </router-link>
      </div>
      
      <div class="tab-content">
        <router-view />
      </div>
    </div>
  </div>
</template>

<style scoped>
.medical-services-container {
  width: 100%;
}

.page-header {
  margin-bottom: 24px;
}

.page-title {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
}

.page-subtitle {
  margin: 0 0 16px 0;
  color: var(--text-secondary);
}

.card {
  background-color: var(--background-light);
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.nav-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--background-light);
  padding: 0 16px;
}

.nav-tab {
  padding: 16px 20px;
  font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s;
  text-decoration: none;
}

.nav-tab:hover {
  color: var(--primary-color);
  background-color: rgba(var(--primary-color-rgb), 0.05);
}

.nav-tab.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

.tab-content {
  padding: 24px;
}

@media (max-width: 768px) {
  .nav-tabs {
    overflow-x: auto;
    padding: 0 8px;
  }
  
  .nav-tab {
    padding: 12px 16px;
    white-space: nowrap;
  }
}
</style> 